{% extends 'CHOMPSGIBundle:Seguridad:base.html.twig' %}
{% block subtitle %} Nuevo Rol{% endblock %} 


{% block content %} 

	{{ parent() }}

	<style>
		.newRol , .inner{
			padding-left: 2%;
		}
		.newRol .btn{
			margin-top: 0.3em;
		}

		.formRow .label{
			text-align: left;
		}

		#myHiddenDiv{
			visibility:hidden;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}
	</style>


	<script>
		function addVYCpermiso(){
			var myHiddenPermiso = '';

			var VYCact = jQuery('#VYCActividadWrapper select option:selected');
			var VYCemp = jQuery('#VYCEmpresaWrapper select option:selected');
			
			var newPermisoString = '';
			var actividad = '';
			if (VYCact.text() == 'Ver'){
				myHiddenPermiso += 'VER_INCIDENTE_ALL_' ;
				actividad = 'Visualizacion de incidentes para ';
			}else{
				actividad = 'Creacion de incidentes para ';
				myHiddenPermiso += 'CREAR_INCIDENTE_ALL_' ;
			}

			var empresa = '';
			myHiddenPermiso += 'EMP:' ;
			if (VYCemp.text() == 'Todas'){
				empresa = 'todas las empresas';
				myHiddenPermiso += 'ALL' ;
			}else{
				empresa = VYCemp.text();
				myHiddenPermiso += VYCemp.val() ;
			}
			myHiddenPermiso += ';';

			newPermisoString = actividad + empresa + '\n';
			var VYCTextArea = jQuery('#VYC_TEXTAREA');
			var content = VYCTextArea.html();
			console.log('+-+- Content has: '+content);
			VYCTextArea.html(
				 content + newPermisoString
			);
		
			addedPerms = jQuery ('#VYC').html();
			jQuery('#VYC').html(addedPerms+myHiddenPermiso);
		}
	</script>
	

	<div id="myHiddenDiv">
		<!-- Visualizacion y creacion de incidentes -->
		<div id="VYC">
		</div>
		<!-- Modificación de incidentes -->
		<div id="MODIFICACTION_DE_INCIDENTES">
		</div>
	</div>

	<div class="row-fluid"> 
		<div class="span12">
			<h1>Alta Rol</h1>
		</div>
	</div>
	<div class="row-fluid"> 
		
		{{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}

		<div class="span12 newRol">
			<div class="row-fluid">
				<div class="span12">
					<h2>
						Datos de Rol
					</h2>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12 inner">
					
					<div class="row-fluid">
						<div class="span14" style="text-align: left">
							{{ form_row(form.rolNombre) }}
						</div>
					</div>
					<br />
					<div class="row-fluid">
						<div class="span2">Descripci&oacute;n:</div>
						<div class="span10">
							{{ form_row(form.rolDescripcion) }}
						</div>
					</div>
				</div>
			</div>
			
			<br />
			<div class="row-fluid">
				<div class="span12">
					<h2>
						Definici&oacute;n de permisos
					</h2>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12 inner">
					
					<div class="row-fluid">
						<div class="span12">
							<h4 style="text-align: left;">Visualizaci&oacute;n y creaci&oacute;n de incidentes</h4>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12 inner">
							<div class="row-fluid">
								<div class="span12">
									<div class="span2" id="VYCActividadWrapper">
										{{ form_row(form.VYCActividad) }}
										<!--<input type="select" /> -->
									</div>
									<div class="span3" id="VYCEmpresaWrapper">
										{{ form_row(form.VYCEmpresa) }}
										<!--<input type="select" /> -->
									</div>
									<div class="span2" style="text-align: center">
										<div class="row-fluid"> 
											<div class="btn-group">
												<!--<a class="btn" href="#">Agregar<i class="icon-arrow-right icon-white"></i> </a>-->
												<a href="#" class="btn" onClick="addVYCpermiso();">
													Agregar&nbsp;<span class="add-on"><i class="icon-arrow-right icon-white"></i></span>
												</a>
											</div>
											<!--<input type="button" class="btn" value="Agregar" >-->
										</div>
										<!--
										<div class="row-fluid">
											<div class="btn-group">
												<a class="btn" href="#"><i class="icon-arrow-left icon-white"></i> Quitar</a>
											</div>
										</div>
										-->
									</div>
									<div class="span4">
										<textarea rows="3" name="VYC_TEXTAREA" id="VYC_TEXTAREA" style="max-width: 500px"> </textarea>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			

			<div class="row-fluid">
				<div class="span12 inner">
					
					<div class="row-fluid">
						<div class="span12">
							<h4 style="text-align: left;">Modificaci&oacute;n de incidentes</h4>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12 inner">
							<div class="row-fluid">
								<div class="span12">
									<div class="span3">
										Campo:
										<input type="select" /> 
									</div>
									<div class="span2">
										Empresa:
										<input type="select" /> 
									</div>
									<div class="span2" style="text-align: center">
										<div class="row-fluid"> 
											<div class="btn-group">
												<!--<a class="btn" href="#">Agregar<i class="icon-arrow-right icon-white"></i> </a>-->
												<a href="#" class="btn">
													Agregar
													<span class="add-on"><i class="icon-arrow-right icon-white"></i></span>
												</a>
											</div>
											<!--<input type="button" class="btn" value="Agregar" >-->
										</div>
										<div class="row-fluid">
											<div class="btn-group">
												<a class="btn" href="#"><i class="icon-arrow-left icon-white"></i> Quitar</a>
											</div>
											<!--<input type="button" class="btn" value="Quitar" />-->
										</div>
									</div>
									<div class="span5">
										<textarea rows="3" name="descripcion" style="max-width: 500px"> </textarea>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="row-fluid">
				<div class="span12 inner">
					
					<div class="row-fluid">
						<div class="span12">
							<h4 style="text-align: left;">ABM de entidades</h4>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12 inner">
							<div class="row-fluid">
								<div class="span12">
									<div class="span3">
										Actividad:
										<input type="select" /> 
									</div>
									<div class="span2">
										Entidad:
										<input type="select" /> 
									</div>
									<div class="span2" style="text-align: center">
										<div class="row-fluid"> 
											<div class="btn-group">
												<!--<a class="btn" href="#">Agregar<i class="icon-arrow-right icon-white"></i> </a>-->
												<a href="#" class="btn">
													Agregar
													<span class="add-on"><i class="icon-arrow-right icon-white"></i></span>
												</a>
											</div>
											<!--<input type="button" class="btn" value="Agregar" >-->
										</div>
										<div class="row-fluid">
											<div class="btn-group">
												<a class="btn" href="#"><i class="icon-arrow-left icon-white"></i> Quitar</a>
											</div>
											<!--<input type="button" class="btn" value="Quitar" />-->
										</div>
									</div>
									<div class="span5">
										<textarea rows="3" name="descripcion" style="max-width: 500px"> </textarea>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="row-fluid">
				<div class="span12 inner">
					
					<div class="row-fluid">
						<div class="span12">
							<h4 style="text-align: left;">Configuraci&oacute;n general del sistema</h4>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12 inner">
							<div class="row-fluid">
								<div class="span12">
									<div class="span5">
										Opci&oacute;n:
										<input type="select" /> 
									</div>
									<div class="span2" style="text-align: center">
										<div class="row-fluid"> 
											<div class="btn-group">
												<!--<a class="btn" href="#">Agregar<i class="icon-arrow-right icon-white"></i> </a>-->
												<a href="#" class="btn">
													Agregar
													<span class="add-on"><i class="icon-arrow-right icon-white"></i></span>
												</a>
											</div>
											<!--<input type="button" class="btn" value="Agregar" >-->
										</div>
										<div class="row-fluid">
											<div class="btn-group">
												<a class="btn" href="#"><i class="icon-arrow-left icon-white"></i> Quitar</a>
											</div>
											<!--<input type="button" class="btn" value="Quitar" />-->
										</div>
									</div>
									<div class="span5">
										<textarea rows="3" name="descripcion" style="max-width: 500px"> </textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid" style="margin: 20px 0;">
				<div class="span3 offset9">
			<!--		<a href="#" class="btn btn-big">Cancelar</a>
					<a href="#" class="btn btn-big">Guardar</a> -->
					{{ form_widget(form.save, { 'attr': {'class': 'btn btn-success pull-left'} }) }}

					{{ form_end(form) }}

				</div>
			</div>

		</div>


	</div>

	 <script>
	 	activarActionsTab('permisos');  
		
		$campoSelect = 'chomp_sgibundle_permisoChomp_campo';
		$objetoSelect = 'chomp_sgibundle_permisoChomp_objeto';

		hideParentDiv($campoSelect);

		$('#'+$objetoSelect).change(function () {
				console.log('objeto changed');
				var str = '';
				$( '#'+$objetoSelect+' option:selected' ).each(function() {
					if ( $(this).text() == 'Incidentes' ){
						console.log('incidentes selected');
						showParentDiv($campoSelect);
					}else{
						console.log('incidentes not selected');
						hideParentDiv($campoSelect);
					}
				});
			});
	 </script>

{% endblock %}
 
